<template>
	<view class="container-code">
		<page-container v-if="isPage"></page-container>

		<u-navbar :title="goodInfo.name" leftIconColor="#fff" bgColor="#0a0816" placeholder :autoBack="true">
			<template slot="right">
				<isCollect :goodsId="goodInfo.id"></isCollect>
			</template>
		</u-navbar>

		<!-- 图片 -->
		<view class="image-box centerX">

			<image class="imageSize" :src="goodInfo.cover+'?image_process=resize,l_620'" mode="aspectFill"></image>

			<!-- <view class="text-bottom pad-30">
				<view class="about-box">
					<image mode="aspectFill" @click="hanldeNotice(goodInfo.name)" class="about"
						src="../../static/icon/about.png"> </image>
				</view>
				<view>
					<view class="mar-top-32 font-36 color-white">{{goodInfo.name}}</view>
					<view class="rowW pad-top-24">
						<capsule class="mar-top-10" title="限量" :number="goodInfo.build"></capsule>
						<capsule class="mar-top-10 mar-left-10" title="流通"
							:number="goodInfo.out_cnt - goodInfo.broken_cnt">
						</capsule>
					</view>
				</view>
			</view> -->
		</view>

		<u-sticky :offset-top="offsetTop" zIndex="12" customNavHeight="0" h5-nav-height="0" bgColor="#0a0816">
			<!-- 排序 -->
			<view class="centerY pad-left-right-100 gap50  pad-top-bottom-4 mar-top-bottom-10">
				<view :class="sortType == 0 ? 'sortOn':''" @click="hanldeSort(0,0)"
					class="sort radius16 centerY flex-w bg-theme1 font-36 pad-left-right-24 pad-top-bottom-16">
					<text>价格排序</text>
					<!-- 选中时切换状态 -->
					<template v-if="sortType == 0">
						<image v-if="sortPriceStatus == 0" class="mar-left-24 up"
							src="../../static/icon/sort-active.png" mode="">
						</image>
						<image v-else class="mar-left-24" src="../../static/icon/sort-active.png" mode=""></image>
					</template>
					<!-- 未选中 -->
					<template v-else>
						<image v-if="sortPriceStatus == 0" class="mar-left-24 up"
							src="../../static/icon/sort-disable.png" mode=""></image>
						<image v-else class="mar-left-24 " src="../../static/icon/sort-disable.png" mode=""></image>
					</template>
				</view>


				<view :class="sortType == 1 ? 'sortOn':''" @click="hanldeSort(1,0)"
					class="sort radius16 centerY flex-w bg-theme1 font-36 pad-left-right-24 pad-top-bottom-16">
					<text>编号排序</text>
					<!-- 选中时切换状态 -->
					<template v-if="sortType == 1">
						<image v-if="sortNumberStatus == 0" class="mar-left-24 up"
							src="../../static/icon/sort-active.png" mode="">
						</image>
						<image v-else class="mar-left-24" src="../../static/icon/sort-active.png" mode=""></image>
					</template>
					<!-- 未选中 -->
					<template v-else>
						<image v-if="sortNumberStatus == 0" class="mar-left-24 up"
							src="../../static/icon/sort-disable.png" mode=""></image>
						<image v-else class="mar-left-24 " src="../../static/icon/sort-disable.png" mode=""></image>
					</template>
				</view>
			</view>
		</u-sticky>

		<!-- 列表 -->
		<view class="list-box" v-if="codeList.length > 0">
			<view class="bg-theme1 pad-top-bottom-20 radius24">
				<view class="list pad-left-right-32 pad-top-bottom-24 centerY" v-for="item in codeList"
					@click="hanldeDetails(item.id)">
					<view class="list-right flex-w">
						<view class="centerY">
							<view class="font-28 color-white font-w-500">{{goodInfo.name}}</view>
							<view v-for="info in item.allow_pay_plat" :key="info">
								<template v-for="pay in payList">
									<view v-if="info == pay.id" class="payButton">{{pay.name.charAt(0)}}</view>
								</template>
							</view>
							<!-- <view class="payButton">汇</view> -->
						</view>
						<view class="centerY mar-top-16">
							<view v-if="item.selling_cnt > 0"
								class="font-24 radius10 pad-left-right-16 pad-top-bottom-4 bg-hui color-grey">
								{{createOrderTile}}
							</view>
							<view class="font-24 radius10 pad-left-right-16 pad-top-bottom-4 bg-theme1 color-theme"
								v-else>寄售</view>
							<view class="font-24 mar-left-24 color-white">{{item.goods_code_txt}}</view>
						</view>
					</view>
					<view class="centerY color-theme">
						<view class="font-28">￥</view>
						<view class="font-48 font-w-600 ">{{item.price}}</view>
						<u-icon class="mar-left-10" color="#fff" name="arrow-right" size="10"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<view v-if="codeList.length == 0 && pageStatus == 'nomore'" class="centerX mar-top-bottom-76">
			<image class="status" src="../../static/image/market-out1.png"></image>
		</view>

		<!-- 列表加载状态 -->
		<u-loadmore v-if="codeList.length > 0" :status="pageStatus" color="#9f5ff6" iconColor="#9f5ff6" />

		<!-- 版权 -->
		<!-- 	<view class="copyright">
			<image src="../../static/icon/copyright.png" mode=""></image>
		</view> -->

		<!-- 选择支付方式 -->
		<view class="button-box pad-left-right-32 pad-top-bottom-6 bg-theme1 centerY">
			<view class="button font-30 flex-w" @click="hanldePay">快捷下单</view>
		</view>

		<!-- 确认支付方式 -->
		<u-popup :show="payStatus" bgColor="#36313B" :overlayStyle="{zIndex: 998}" zIndex="999" mode="bottom"
			round="18rpx" closeable @close="payStatus = false">
			<view class="pad-32 ">
				<pay-list class="mar-top-bottom-30" @payNumber="payNumber" @hanldeTypePay="hanldeTypePay"
					scene="marketList"></pay-list>
				<view class="buttonConfirm font-32" @click="$u.debounce(hanldeConfirm,500)">确认</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	// 页面接口
	import {
		codePageList,
		goodsDetails,
		payPlat,
		openWallet,
		userWalletOPen,
		lowestMarketOrder,
		cashierPay,
		configIndex,
		addOpenWalletOrder,
		userWalletInfo
	} from '@/config/api.js'
	export default {
		data() {
			return {
				// 切换筛选价格还是编号
				sortType: 0,
				// 价格筛选
				sortPriceStatus: false,
				// 编号筛选
				sortNumberStatus: false,
				// 选择支付方式
				payStatus: false,
				// 点击收藏
				isCollect: false,
				// 藏品详情
				goodInfo: {},
				// 分页
				ps: 10,
				page: 1,
				pageData: {},
				// 编号列表
				codeList: [],
				// 默认选中的支付方式
				pay: 0,
				// 支付方式
				payList: [],
				// 开通了几个支付
				isPay: 0,
				// 筛选
				sort: 'price,asc',
				offsetTop: 0,
				// 锁定模式 字符
				createOrderTile: '',
				// 显示页面加载
				isPage: false,
				// 支付id
				payId: ''
			}
		},
		onLoad(options) {
			this.isPage = true;
			this.goodsId = options.goods_id;
			if (options.goods_id) {
				let p1 = this.getDataInfo();
				let p2 = this.getDataList();
				// let p3 = this.getPayPlat();

				Promise.all([p1, p2]).then((res) => {
					this.isPage = false;
				})
			}

			this.setOffestTop();

			// 锁单模式
			configIndex({
				code_arr: ['create_order_mode'],
			}).then(res => {
				if (res.data.create_order_mode == 1) {
					this.createOrderTile = '已被锁定';
				} else {
					this.createOrderTile = '抢单中，去购买';
				}
			})
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.codeList = [];
			this.page = 1;
			this.getDataList();
		},
		// 上拉加载更多
		onReachBottom() {
			if (this.pageData.next_page_url) {
				this.getDataList();
			}
		},
		methods: {
			// 获取平台支付方式
			getPayPlat() {
				return new Promise((resolve, reject) => {
					payPlat({
						scene: 'market'
					}).then(pay => {
						let {
							lists
						} = pay.data;

						// 获取自己开通的钱包
						openWallet().then(res => {
							let {
								yes
							} = res.data;
							lists.map((item, index) => {
								item.isShow = false;
								for (let key in yes) {
									if (item.id == key) {
										item.isShow = true;
										this.isPay++
									}
								}
							})

							// 判断开通了几个钱包 全部开通选择第一个钱包
							for (let i = 0; i < lists.length; i++) {
								if (this.isPay == lists.length) {
									this.pay = 0;
									break;
								} else {
									if (lists[i].isShow) {
										this.pay = i;
										break;
									}
								}
							}
							resolve();
						})
						this.payList = lists;
					})
				})
			},
			// 当前是那个支付
			hanldeTypePay(id) {
				this.payId = id;
			},
			// 开通了几个支付
			payNumber(number) {
				this.isPay = number;
			},
			getNewMap(arrObj = []) {
				let map = new Map();
				for (let item of arrObj) {
					if (!map.has(item.id)) {
						map.set(item.id, item);
					};
				};
				return [...map.values()]
			},
			setOffestTop() {
				// #ifdef APP-PLUS
				let systemInfo = uni.getSystemInfoSync()
				let topPx = systemInfo.statusBarHeight // 顶部状态栏+沉浸式自定义顶部导航
				this.offsetTop = topPx / (uni.upx2px(topPx) / topPx) // px转rpx
				// #endif
			},
			// 跳转公告搜索
			hanldeNotice(name) {
				uni.navigateTo({
					url: '/pages/notice/search?name=' + name
				})
			},
			// 快捷支付
			hanldeConfirm() {
				// 网络差阻止还没回来的支付状态
				if (this.payId == '') {
					uni.$u.toast('支付方式加载中');
					return
				}

				// 开通了支付
				if (this.isPay > 0) {
					uni.showLoading({
						title: '支付中...',
						mask: true
					})
					// 创建订单
					lowestMarketOrder({
						goods_id: this.goodInfo.id,
					}).then(order => {
						// 支付订单
						cashierPay({
							order_id: order.data.order_id,
							pay_plat: this.payId
						}).then(res => {
							uni.hideLoading();
							let {
								pay_data
							} = res.data;
							// #ifdef APP-PLUS
							if (this.payId == 10) {
								plus.runtime.openURL(pay_data.pay_url)
							}
							// #endif
							// #ifdef H5
							window.location.href = pay_data.pay_url
							// #endif
						}).catch(() => {
							uni.hideLoading();
						})
					})
				}
			},
			// 获取编号列表
			getDataList() {
				return new Promise((resolve, reject) => {
					this.pageStatus = 'loading';
					codePageList({
						goods_ids: [this.goodsId],
						ps: this.ps,
						page: this.page,
						sort: this.sort,
					}).then(res => {
						this.pageStatus = 'loadmore';
						let {
							data
						} = res;
						this.pageData = data;
						this.page = data.current_page + 1;

						this.codeList = this.getNewMap(this.codeList.concat(data.data));

						uni.stopPullDownRefresh(); //停止下拉刷新动画
						resolve();
						// 没有更多了
						if (data.next_page_url == null) {
							this.pageStatus = 'nomore'
						}
					})
				})
			},
			// 获取详情
			getDataInfo() {
				return new Promise((resolve, reject) => {
					goodsDetails({
						id: this.goodsId
					}).then(res => {
						this.goodInfo = res.data.info;
						resolve();
					})
				})
			},
			// 跳转详情
			hanldeDetails(marketId) {
				uni.navigateTo({
					url: '/pages/market/details?market_id=' + marketId
				})
			},
			// 选择支付方式
			hanldePay() {
				this.payId = '';
				this.payStatus = !this.payStatus;
			},
			// 切换收藏
			hanldeCollect() {
				this.isCollect = !this.isCollect;
			},
			// 筛选
			hanldeSort(type, status) {
				this.sort = type == 0 ? 'price,asc' : 'goods_code_id,asc'
				// 切换价格排序
				if (this.sortType == type && type == 0) {
					this.sortPriceStatus = !this.sortPriceStatus;
					this.sort = this.sortPriceStatus ? 'price,desc' : 'price,asc'
				} else {
					if (this.sortType == 0) {
						this.sortPriceStatus = false;
					}
				}

				// 切换编号排序
				if (this.sortType == type && type == 1) {
					this.sortNumberStatus = !this.sortNumberStatus;
					this.sort = this.sortNumberStatus ? 'goods_code_id,desc' : 'goods_code_id,asc'
				} else {
					if (this.sortType == 1) {
						this.sortNumberStatus = false;
					}
				}

				// 切换筛选模式
				this.sortType = type;
				this.codeList = [];
				this.page = 1;
				this.getDataList();
			},

		}
	}
</script>


<style scoped lang="scss">
	.container-code {
		width: 751rpx;
		min-height: 100vh;
		// background-color: $uni-bg-black;
		padding-bottom: 150rpx;
		background: url('../../static/image/my-bg.png') no-repeat;
		background-size: 100% 100%;

		::v-deep .u-navbar__content {
			background-image: url('../../static/image/my-bg.png');
			background-size: cover;
			background-repeat: no-repeat;
		}

		::v-deep .u-sticky__content {
			background-image: url('../../static/image/my-bg.png');
			background-size: cover;
			background-position-y: -300rpx;
		}


		.status {
			display: block;
			width: 367rpx;
			height: 291rpx;
		}

		.navber-right {
			width: 48rpx;
			height: 48rpx;
		}

		.image-box {
			position: relative;
			background: url('../../static/image/imgBase.png') no-repeat;
			background-size: 506rpx 165rpx;
			background-position: center 400rpx;
			height: 600rpx;

			.about {
				width: 236rpx;
				height: 60rpx;
			}

			.imageSize {
				display: block;
				width: 335rpx;
				height: 335rpx;
				border-radius: 20rpx;
				margin-top: 40rpx;
			}

			// &::after {
			// 	content: '';
			// 	position: absolute;
			// 	top: 0rpx;
			// 	left: 0rpx;
			// 	width: 100%;
			// 	height: 100%;
			// 	background: rgba(0, 0, 0, 0.4);
			// }

			.text-bottom {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0rpx;
				z-index: 2;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: space-between;


				.about-box {
					display: flex;
					flex-direction: row-reverse;
				}
			}

		}

		.list-box {
			// border-top: 1rpx solid #dbdbdb;
			padding: 0 30rpx;

			.list {
				// border-bottom: 1rpx solid #dbdbdb;
			}
		}
	}

	.button-box {
		position: fixed;
		width: 100%;
		bottom: 0;

		.button-price {
			margin-right: 100rpx;
		}

		.button {
			background: $uni-bg-theme;
			color: #fff;
			text-align: center;
			height: 92rpx;
			line-height: 92rpx;
			border-radius: 50rpx;
		}
	}

	.cell {
		border-bottom: 2rpx solid rgb(224, 226, 229);
	}

	.buttonConfirm {
		background: linear-gradient(90deg, #5347FE 0%, #FC6BB0 100%);
		color: #fff;
		text-align: center;
		height: 92rpx;
		line-height: 92rpx;
		border-radius: 50rpx;
	}

	.copyright {
		margin: 32rpx 0;

		image {
			width: 100%;
			height: 128rpx;
		}
	}

	.sort {
		border: 2rpx solid $uni-bg-theme1;
		color: $uni-text-color-grey;

		image {
			display: block;
			width: 28rpx;
			height: 28rpx;
		}
	}

	.sortOn {
		color: $uni-theme;
	}

	.up {
		transform: rotate(180deg);
	}

	// 灰色
	.bg-hui {
		background: rgba(0, 0, 0, 0.2);
	}

	.payButton {
		background: $uni-bg-theme;
		font-size: 20rpx;
		margin-left: 20rpx;
		border-radius: 10rpx;
		padding: 2rpx 6rpx;
		color: white;
	}

	.icon-box {
		width: 30rpx;
		flex-shrink: 0;
		height: 30rpx;
		border: 1rpx solid #c8c9cc;
		border-radius: 50%;
	}

	.button-pay {
		background: linear-gradient(270deg, #df0007, #df0007);
		color: #fff;
		font-size: 24rpx;
		line-height: 44rpx;
		padding: 0 20rpx;
		border-radius: 20rpx;
	}
</style>